

    function Magnifier(){
        this.small_img_ele = $(".small-img");
        this.big_img = $(".big-img img")
        this.big_img_ele = $(".big-img");
        this.focus_ele = $(".focus");

        this.container_ele = $(".container");

        this.img_list = [
            {
                small :"../../static/images/img/s-img1.webp",
                big : "../../static/images/img/b-img1.webp"
            },
            {
                small :"../../static/images/img/s-img1.webp",
                big : "../../static/images/img/b-img2.webp"
            }
        ]
        this.container_offset = this.container_ele.offset()
    
        this.focus_size = {
            width : this.focus_ele.width(),
            height : this.focus_ele.height()*2
        }
        }
    Magnifier.prototype.bindEvent = function(){
        var mag = this;
        this.small_img_ele.mouseover(function(){
        
            mag.toggle("show");
        })
        this.small_img_ele.mouseout(function(){
        
        mag.toggle("hide");
        })
        this.small_img_ele.mousemove(function(event){
        
            mag.focusMove(event.clientX,event.clientY);
            mag.bigImgMove();
        });

        }
    Magnifier.prototype.toggle = function(type){
     switch(type) {
        case "show":
            this.big_img_ele.show()
            this.focus_ele.show();
            break;
        case "hide" :     
            this.big_img_ele.hide();
            this.focus_ele.hide()
            break;
       }
    }
    Magnifier.prototype.focusMove = function(x,y){
        var _left = x -this.container_offset.left - this.focus_size.width/2;
        var _top  = y - this.focus_size.height / 2

    if(_left<0){
        _left =0;
    }
    if(_top<0){
        _top = 0;
    }
    if(_left>150){
        _left = 150;
    }
    if(_top>150){
        _top = 150;
    }
    this.focus_ele.css({
        left :_left,
        top : _top

    })
    this.prop_left = _left/150;
    this.prop_top = _top/150;

    }
    // 跨函数获取数据
    Magnifier.prototype.bigImgMove = function(){
    this.big_img.css({
        left :-this.prop_left*250,
        top  :-this.prop_top *250
    })
    }

    var m = new Magnifier();
    m.bindEvent();


    var toggle = true;
    $("#simg1").click(function() {
        if (toggle) {
            $("#bimg1").attr("src", "../../static/images/img/b-img1.webp")
            $("#bimg2").attr("src", "../../static/images/img/b-img1.webp")

            toggle = false;
        } else {
            $("#bimg1").attr("src", "../../static/images/img/b-img1.webp")
            $("#bimg2").attr("src", "../../static/images/img/b-img1.webp")

            toggle = true;
        }
    });

    $("#simg2").click(function() {
        if (toggle) {
            $("#bimg1").attr("src", "../../static/images/img/b-img2.webp")
            $("#bimg2").attr("src", "../../static/images/img/b-img2.webp")

            toggle = false;
        } else {
            $("#bimg1").attr("src", "../../static/images/img/b-img2.webp")
            $("#bimg2").attr("src", "../../static/images/img/b-img2.webp")
            toggle = true;
        }
    });


